import React, { memo, FC } from 'react'

export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark'

export interface ProgressProps {
  percent: number;
  strokeHeight?: number;
  showText?: boolean;
  styles?: React.CSSProperties,
  theme?: ThemeProps;

}

export const Progress: FC<ProgressProps> = memo((props) => {
  const {
    percent,
    strokeHeight,
    showText,
    styles,
    theme
  } = props;

  return (
    <div className="origin-progress-bar" style={ styles }>
      <div className="origin-progress-bar-outer" style={{ height: `${strokeHeight}px`}}>
        <div
          className={`origin-progress-bar-inner color-${theme}`}
          style={{width: `${percent}%`}}
        >
          {showText && <span className="inner-text">
            { `${percent}%`}
          </span> }
        </div>
      </div>
    </div>
  )
});
Progress.defaultProps = {
  strokeHeight: 15,
  showText: true,
  theme: "primary"
}

export default Progress;
